import WithReactions from "@/components/layouts/WithReactions";
import WithTableOfContents from "@/components/layouts/WithTableOfContents";
import Head from "@/components/meta/Head";
import SkipNavigation from "@/components/navigations/SkipNavigation";
import PageHeader from "@/components/PageHeader";

import { getPageOgImageUrl } from "@/helpers/page";

import ProjectFooter from "@/contents-layouts/Project/ProjectFooter";
import ProjectMeta from "@/contents-layouts/Project/ProjectMeta";

import type { TProjectFrontMatter, TTableOfContents } from "@/types";
import type { PropsWithChildren } from "react";

interface ProjectLayoutProps {
  frontMatter: TProjectFrontMatter;
  tableOfContents: TTableOfContents;
}

function ProjectLayout({
  frontMatter: { title, description, caption, githubUrl, npmUrl },
  tableOfContents,
  children = null,
}: PropsWithChildren<ProjectLayoutProps>) {
  // get og image urls
  const image = getPageOgImageUrl({
    caption,
    title,
    description,
  });

  return (
    <>
      <SkipNavigation />
      <Head title={title} description={description} ogImage={image.default} />
      <PageHeader title={title} description={description} caption={caption} />
      <ProjectMeta githubUrl={githubUrl} npmUrl={npmUrl} />
      <WithTableOfContents tableOfContents={tableOfContents}>
        {children}
        <ProjectFooter githubUrl={githubUrl} />
      </WithTableOfContents>
      <WithReactions contentTitle={title} contentType="PROJECT" />
    </>
  );
}

export default ProjectLayout;
